<template>
  <div>
    <el-table :data="list" class="ymd-table">
      <el-table-column
        prop="id"
        label="id"
      >
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        prop="updTime"
        label="注册时间"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="currentPageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'UserList',
  computed: {
    ...mapState({
      list: state => state.user.list,
      total: state => state.user.total,
    }),
  },
  data() {
    return {
      currentPage: 1,
      currentPageSize: 10,
    }
  },
  created() {
    this.$store.dispatch('getUserList', {
      page: this.currentPage,
      pageSize: this.currentPageSize,
    })
  },
  methods: {
    handleSizeChange(pageSize) {
      this.currentPageSize = pageSize
      this.$store.dispatch('getUserList', {
        pageSize,
        page: this.currentPage,
      })
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.$store.dispatch('getUserList', {
        page,
        pageSize: this.currentPageSize,
      })
    },
  },
}
</script>

<style>

</style>
